<template>
	<el-dialog class="edit-dialog" :title="title" :visible.sync="dialogFormVisible" width="600px">
		<el-form :model="form" :label-position="labelPosition" size="small" ref="formRef" :rules="rules">
			<el-row :gutter="50">
				<el-col :span="24">
					<el-form-item prop="">
						<span slot="label">视频标题</span>
						<el-input autocomplete="off" v-model="form.title" placeholder="请输入视频标题">
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row :gutter="50">
				<el-col :span="12">
					<el-form-item prop="">
						<span slot="label">抖音号</span>
						<el-input autocomplete="off" v-model="form.tiktok" placeholder="请输入抖音号">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="">
						<span slot="label">联系方式</span>
						<el-input autocomplete="off" v-model="form.contact_information" placeholder="请输入联系方式">
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="50">
				<el-col :span="12">
					<el-form-item prop="">
						<span slot="label">是否电联<span class="red">*</span></span>
						<el-select v-model="form.is_electrical_connection" placeholder="请选择">
							<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="">
						<span slot="label">是否加微<span class="red">*</span></span>
						<el-select v-model="form.is_wechat" placeholder="请选择">
							<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="50">
				<el-col :span="12">
					<el-form-item prop="">
						<span slot="label">电话号码是否有效<span class="red">*</span></span>
						<el-select v-model="form.is_number_valid" placeholder="请选择"> 
							<el-option v-for="item in typelist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="">
						<span slot="label">时间<span class="red">*</span></span>
						<el-date-picker v-model="form.add_time" type="date" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="50">
				<el-col :span="24">
					<el-form-item prop="">
						<span slot="label">线索内容</span>
						<el-input type="textarea" autocomplete="off" v-model="form.content" placeholder="请输入线索内容">
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
			<el-button type="primary" @click="submits" size="small">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {Message} from 'element-ui';
	export default {
		data() {
			return {
				value1: '',
				type: '',
				dialogFormVisible: false,
				labelPosition: "top",
				title: "",
				typelist: [{
						id: 1,
						name: '是'
					},
					{
						id: 2,
						name: '否'
					},{
						id: 3,
						name: '未知'
					}
				],
				statelist: [{
						id: 1,
						name: '是'
					},
					{
						id: 2,
						name: '否'
					}
				],
				form: {
				},
				rules: {
					name: [{
						required: true,
						message: '请输入数量',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请选择类型',
						trigger: 'change'
					}],
				},

			};
		},
		methods: {
			init(id,customer_uid) {
				
				this.dialogFormVisible = true;
				this.title = id ? '编辑线索' : '添加线索';
				this.form={};
				if(id>0){
					this.form.id = id;
					this.$http.post("Clue/lists",{ids:id}).then((response) => {
						if(response.data.total>0){
							this.form=response.data.records[0];
							delete this.form.operate_uid;
							delete this.form.customer_uid;
							delete this.form.createtime;
							delete this.form.updatetime;
							delete this.form.customer_name;
							this.$refs['formRef'].resetFields();
						}
						
						
					});
				}else{
					this.form.customer_uid=customer_uid;
					setTimeout(() => { // DOM未渲染，所以开个定时器
						this.$refs['formRef'].resetFields(); // 重置表单
						
					
					}, 30) 
				}
				/* this.$refs['formRef'].resetFields(); */
				
			},
			submits() {
			
				this.$refs['formRef'].validate((valid) => {
					if (valid) {
						var path="Clue/add"
						if(this.form.id>0){
						path='Clue/edit'
						}
						this.$http.post(path,this.form).then((response) => {
								
													Message({
														type: 'success',
														message: '保存成功'
													});
													this.$emit("refreshDataList");
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			handleRemove(file) {
				console.log(file);
			},
			handlePictureCardPreview(file) {
				console.log(file);
			},
		},
	};
</script>

<style lang="scss">
	.edit-dialog {
		.el-dialog__body {
			padding-top: 0 !important;
		}

		.el-form-item {
			margin-bottom: 5px !important;
		}

		.el-form--label-top .el-form-item__label {
			padding-bottom: 0 !important;
		}

		.el-select {
			width: 100%;
		}

		.el-upload--picture-card {
			width: 100px;
			height: 100px;
			line-height: 100px;
		}
	}
</style>
